<template>
  <div class="student-dashboard">
    <el-row :gutter="20" class="dashboard-row">
      <el-col :span="12">
        <el-card class="dashboard-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon><Bell /></el-icon>
              <span>我要点名</span>
            </div>
          </template>
          <div class="card-content" @click="handleAttendance">
            <el-icon><UserFilled /></el-icon>
            <span>进入点名</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="dashboard-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon><Reading /></el-icon>
              <span>我要学习</span>
            </div>
          </template>
          <div class="card-content" @click="handleStudy">
            <el-icon><Collection /></el-icon>
            <span>进入课程</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Bell, UserFilled, Reading, Collection } from '@element-plus/icons-vue'

export default {
  name: "StudentDashboard",
  components: {
    Bell,
    UserFilled,
    Reading,
    Collection
  },
  methods: {
    handleAttendance() {
      // 处理点名逻辑
      console.log('点击了点名')
      this.$router.push('/student/call')
    },
    handleStudy() {
      // 跳转到课程页面
      this.$router.push('/student/course')
    }
  }
}
</script>

<style scoped>
.student-dashboard {
  padding: 20px;
}

.dashboard-row {
  margin-top: 40px;
}

.dashboard-card {
  cursor: pointer;
  transition: all 0.3s;
}

.dashboard-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 18px;
}

.card-header .el-icon {
  margin-right: 10px;
  font-size: 20px;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.card-content .el-icon {
  font-size: 50px;
  margin-bottom: 20px;
  color: #409EFF;
}

.card-content span {
  font-size: 16px;
  color: #606266;
}

/* 添加一些颜色变化效果 */
.dashboard-card:hover .card-content .el-icon {
  color: #67C23A;
}

.dashboard-card:hover .card-content span {
  color: #67C23A;
}
</style>